<template>
  <view class="wrapper">
    <view class="container-item">
      <view class="title">基本信息</view>
      <view class="container1">
        <view class="item">
          <text class="label">事件类型：</text><text class="content">{{ info.soilType }}</text>
        </view>
        <view class="item">
          <text class="label">事发时间：</text><text class="content">{{ info.time }}</text>
        </view>
        <view class="item">
          <text class="label">事发地址：</text>
          <text class="content">{{ info.address }}</text>
        </view>
        <view class="item">
          <text class="label">上报内容：</text>
          <text class="content">
            {{ info.reason }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDecoration } from '@/api';
export default {
  data() {
    return {
      progress: 0,
      info: {},
    };
  },

  onLoad(opts) {
    const id = opts.id || '';
    this.query(id);
  },

  methods: {
    query(id) {
      getDecoration({ id }).then((res) => {
        this.info = res.data || {};
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import '@/uni.less';
.wrapper {
  background-color: #f8f8f8;
  .container-item {
    margin-top: 24rpx;
    padding: 32rpx;
    background: #fff;
    &:first-child {
      margin-top: 0;
    }
    .title {
      border-left: 8rpx solid @uni-color-primary;
      padding-left: 20rpx;
      line-height: 36rpx;
      font-size: 34rpx;
      font-weight: 500;
      color: @uni-color-primary;
    }
    .container1 {
      margin-top: 32rpx;
      .item {
        margin-top: 16rpx;
        display: flex;
        font-size: 32rpx;
        .label {
          flex-shrink: 0;
          color: #333;
        }
        .content {
          color: #838383;
        }
      }
    }
  }
}
</style>
